<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .user{
            border
        } */
    </style>
</head>
<body>
    <div class="form">
        <p><label for="">用户名:</label><input type="text" class="user"><span class="user_span"></span></p>
        <p><label for="">密&emsp;码:</label><input type="text" class="pwd"><span class="pwd_span"></span></p>
        <p><label for="">手机号:</label><input type="text" class="phone"><span class="phone_span"></span></p>
        <p><label for="">邮&emsp;箱:</label><input type="text" class="email"><span class="email_span"></span></p>
        <p><input type="submit" class="subBtn" value="注册"><input type="reset" value="重置" ></p>
    </div>
    <script src="../js/getdelete.js"></script>
    <script>
        const user=document.querySelector('.user')
        const pwd=document.querySelector('.pwd')
        const phone=document.querySelector('.phone')
        const email=document.querySelector('.email')
        const subBtn=document.querySelector('.subBtn')
        
        var userFlag=false
        var pwdFlag=false
        var phoneFlag=false
        var emailFlag=false

        user.addEventListener('blur',function(){
            userFlag=false
            const str=user.value.trim()
            var x=new RegExp(/^[a-zA-Z_]\w{6,10}$/)
            if(x.test(str)){
                userFlag=true
                user.style.borderColor="black"
            }else{
                user.style.borderColor="red"
            }
        })
        pwd.addEventListener('blur',function(){
            pwdFlag=false
            const str=pwd.value.trim()
            var x=new RegExp(/^[a-zA-Z_]\w{6,10}$/)
            if(x.test(str)){
                pwdFlag=true
                pwd.style.borderColor="black"
            }else{
                pwd.style.borderColor="red"
            }
        })

        phone.addEventListener('blur',function(){
            phoneFlag=false
            const str=phone.value.trim()
            var x=new RegExp(/^1[3-9]\d{9}$/)
            if(x.test(str)){
                phoneFlag=true
                phone.style.borderColor="black"
            }else{
                phone.style.borderColor="red"
            }
        })
        email.addEventListener('blur',function(){
            emailFlag=false
            const str=email.value.trim()
            var x=new RegExp(/^[^_$]\S{5,}@(qq|163|126)\.(com|net)$/)
            if(x.test(str)){
                emailFlag=true
                email.style.borderColor="black"
            }else{
                email.style.borderColor="red"
            }
        })
        subBtn.addEventListener('click',function(){
            if(userFlag&&pwdFlag&&phoneFlag&&emailFlag){
                setCookie("user",user.value.trim(),7)
                setCookie("pwd",pwd.value.trim(),7)
                setCookie("phone",phone.value.trim(),7)
                setCookie("email",email.value.trim(),7)
                console.log(document.cookie)
                alert('注册成功，请登录')
                window.location.href='sign.html'
            }
        })
    </script>
</body>
</html>